<template>
  <div>
    <li 
      class="list-group-item list-group-item-action d-flex align-items-center" 
      style="cursor: pointer;" 
      :class="{'active sun-active': active}" 
      @click.stop="$emit('albumChange', index)">
      {{item.name}}
      <el-dropdown class="ml-auto">
        <span class="el-dropdown-link btn btn-light btn-sm">
          {{item.num}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.stop.native="$emit('openAlbumModel', {item, index})">修改</el-dropdown-item>
          <el-dropdown-item @click.stop.native="$emit('albumDel', index)">删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </li>  
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
    active: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .sun-active{
    color: #67c23a !important;
    background-color: #f0f9eb !important;
    border-color: #c2e7b0 !important;
  }
</style>